<template>
  <div>
    <el-button
      type="primary"
      icon="el-icon-plus"
      @click="$router.push('/course/create')"
      >创建课程</el-button
    >
    <el-table :data="data.data" border stripe>
      <el-table-column
        v-for="(field, name) in fields"
        :prop="name"
        :key="name"
        :label="field.label"
        :width="field.width"
      >
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template v-slot="scopy">
          <el-button
            type="text"
            @click="$router.push(`/course/edit/${scopy.row._id}`)"
            >编辑</el-button
          >
          <el-button
            type="text"
            style="color: red"
            @click="remove(scopy.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { request } from "@/http/request";
import { Component, Vue } from "vue-property-decorator";
@Component
export default class coursesList extends Vue {
  data = {};
  fields = {
    _id: { label: "ID" },
    course: { label: "课程名称" },
    cover: { label: "课程封面图" },
  };
  async fetch(): Promise<any> {
    const res = await request.get("courses");
    console.log(res.data);

    this.data = res.data;
  }
  created(): void {
    this.fetch();
  }
  async remove(id: string) {
    try {
      await this.$confirm("是否确认删除?");
    } catch (error) {
      return;
    }
    await request.delete(`courses/${id}`);
    this.$message.success("删除成功");
    this.fetch();
  }
}
</script>

<style scoped>
</style>